<template>
	<view class="content">
		<view class="uni-margin-wrap">
			<my-swiper :list="list":autoplay="autoplay" :interval="interval":duration="duration"></my-swiper>
			<view class="tip">XXXXXX公司 联系方式 15812341234</view>
		</view>
		<uni-section title="产品类别" type="line" padding>
			<uni-grid :column="4" :highlight="true" @change="change" :showBorder="false" :square="true">
				<uni-grid-item v-for="(item, index) in typeList" :index="index" :key="item.id">
					<view class="grid-item-box" style="background-color: #fff;">

						<img class="image" :src="item.img" v-if="item.img" />
						<uni-icons v-else  custom-prefix="iconfont" type="icon-gengduo" :size="50" color="#777" />
						<text class="text">{{item.type}}</text>
					</view>
				</uni-grid-item>
				
				
			</uni-grid>
		</uni-section>
		<mk-list :goods="goodsList" @clickItem="gotoDetail"></mk-list>
	</view>
</template>

<script>
	import {
		bannerList,
		typeList,
		goodsQuery
	} from "../../service/homeService.js"

	import grid from "../../uni_modules/uni-grid/components/uni-grid/uni-grid.vue"
	import gridItem from "../../uni_modules/uni-grid/components/uni-grid-item/uni-grid-item.vue"
	import section from "../../uni_modules/uni-section/components/uni-section/uni-section.vue"
	import icons from "../../uni_modules/uni-icons/components/uni-icons/uni-icons.vue"
	import  mkList from  "../../components/mk-goods-list/mk-goods-list.vue"
	import mySwiper from  "@/components/myswiper/index.vue"

	export default {
		components: {
			"uni-grid": grid,
			"uni-grid-item": gridItem,
			"uni-section": section,
			"uni-icons": icons,
			"mk-list":mkList,
			mySwiper
		},
		data() {
			return {
				autoplay: true,
				interval: 2000,
				duration: 500,
				list: [],
				typeList: [],
				goodsList:[],
			}
		},
		async created() {
			let res = await bannerList();
			//console.log(res);
			this.list = res.data;

			let res2 = await typeList();

			let typeALLList = res2.data; //类别的集合
			let list2 = []; //需要显示的

			if (typeALLList.length > 7) { //大于七 后面的一个就补充为 显示更多

				list2 = typeALLList.splice(0, 7);
				list2.push({
					id: 0,
					type: "显示更多"
				})
			}

			this.typeList = list2;
			//上面是处理类别
			
			let  res3  = await  goodsQuery({_page:1,_limit:8});
			console.log(res3);
			
			this.goodsList  = res3.data;//商品列表
			
			
		
		},
		onLoad() {

		},
		methods: {
			change(info) {
					let  index = info.detail.index;
					let item  = this.typeList[index];
					let id  = item.id;
					
					uni.navigateTo({
						url:"/pages/search/search?id="+id
					})

			},
			gotoDetail(info){
				uni.navigateTo({
					url:"/pages/detail/detail?id="+info.id
				})
			}

		}
	}
</script>

<style>
	@import "@/static/iconfont.css";
	.image {
		width: 50px;
		height: 50px;
	}

	.grid-item-box {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

	.grid-item-box-row {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

	.grid-dot {
		position: absolute;
		top: 5px;
		right: 15px;
	}

	.uni-margin-wrap {
		height: 400rpx;
		position: relative;
	}


	.uni-margin-wrap .tip {
		position: absolute;
		width: 100%;
		bottom: 0;
		left: 0;
		background-color: rgba(0, 0, 0, 0.6);
		color: azure;

	}
</style>
